import React from "react";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import {Home} from "../modules/HomeModule";
import {Menu} from "../modules/MenuModule";
import {COLORS, icons} from "../constants";
import {Image, StyleSheet, View} from "react-native";

const Tab = createBottomTabNavigator();

const TabPage = () => {
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                headerShown: false,
                tabBarShowLabel: false,
                tabBarBackground: () => (
                    <View
                        style={{
                            backgroundColor: COLORS.black,
                            height: "101%",
                            position: "relative",
                            top: -StyleSheet.hairlineWidth,
                        }}
                    />
                ),
                tabBarIcon: ({focused}) => {
                    const tintColor = focused ? COLORS.primary : COLORS.lightGray4;
                    switch (route.name) {
                        case "Home":
                            return <Image source={icons.tabHome} resizeMode="contain" style={{tintColor: tintColor, width: 25, height: 25}} />;
                        case "Menu":
                            return <Image source={icons.tabMenu} resizeMode="contain" style={{tintColor: tintColor, width: 25, height: 25}} />;
                    }
                },
            })}
        >
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Menu" component={Menu} />
        </Tab.Navigator>
    );
};

export default TabPage;
